<template>
  <div class="cart_item">
    <div class="cart_column column_1">
      <el-checkbox class="my_el_checkbox" v-model="courseData.selected"></el-checkbox>
    </div>
    <div class="cart_column column_2">
      <img :src="courseData.course_img" alt="">
      <span><router-link :to="'/course/detail/'+ courseData.id +'/'">{{ courseData.name }}</router-link></span>
    </div>
    <div class="cart_column column_3">
      <el-select v-model="courseData.expire" size="mini" placeholder="请选择购买有效期" class="my_el_select">
        <el-option :label="expire_value.expire_text" :value="expire_value.id" :key="expire_index"
                   v-for="(expire_value, expire_index) in courseData.expire_list"></el-option>
      </el-select>
    </div>
    <div class="cart_column column_4">¥{{ courseData.real_price }}</div>
    <div style="cursor: pointer;" class="cart_column column_4" @click="del">删除</div>
  </div>
</template>

<script>
export default {
  name: "CartItem",
  data() {
    return {
      // checked:false,
      // expire: "30",
    }
  },
  props: ['courseData',],
  watch: {
    //切换有效期来动态修改后台redis中存储的课程有效期
    "courseData.expire": function () {
      let token = sessionStorage.token || localStorage.token;

      this.$axios.put(`${this.$settings.host}/cart/list/`, {
        course_id: this.courseData.id,
        expire_id: this.courseData.expire,

      }, {
        headers: {
          'authorization': `jwt ${token}`,
        }
      }).then((res) => {
        this.$message.success(res.data.msg);
        this.courseData.real_price = res.data.real_price;
        this.$emit(`fathercal`);
      }).catch((error) => {
        this.$message.error(error.response.data.error);
      })
    },


    "courseData.selected":

      function () {
        let token = sessionStorage.token || localStorage.token;

        this.$axios.patch(`${this.$settings.host}/cart/list/`, {
          course_id: this.courseData.id,
          selected: this.courseData.selected,

        }, {
          headers: {
            'authorization': `jwt ${token}`,
          }
        }).then((res) => {

          this.$message.success('切换勾选状态成功！');
          this.$emit(`fathercal`)

        }).catch((error) => {

        })

      }
  },
  methods: {
    del() {
      let token = sessionStorage.token || localStorage.token;
      this.$axios.delete(`${this.$settings.host}/cart/list/`, {
        params: {
          course_id: this.courseData.id,
        },
        headers: {
          'authorization': `jwt ${token}`,
        }
      }).then((res) => {

        this.$message.success('删除成功，记得再回来买');
        this.$store.commit('add_cart', res.data.cart_length)
        // sessionStorage.cart_length = res.data.cart_length;
        // 前端数据也要对应删除
        this.$emit('fatherdel');
        this.$emit('fathercal');

      }).catch((error) => {

      })
    }
  }


}
</script>

<style scoped>
/*.cart_item{*/
/*  height: 100px;*/
/*}*/
.cart_item::after {
  content: "";
  display: block;
  clear: both;
}

.cart_column {
  float: left;
  height: 150px;
  display: flex;
  align-items: center;
}

.cart_item .column_1 {
  width: 88px;
  position: relative;
}

.my_el_checkbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 16px;
  height: 16px;
}

.cart_item .column_2 {
  /*padding: 67px 10px;*/
  width: 520px;
  /*height: 116px;*/
}

.cart_item .column_2 img {
  width: 175px;
  /*height: 115px;*/
  margin-right: 35px;
  /*vertical-align: middle;*/
}

.cart_item .column_3 {
  width: 197px;
  position: relative;
  padding-left: 10px;
}

.my_el_select {
  width: 117px;
  height: 28px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.cart_item .column_4 {
  /*padding: 67px 10px;*/
  /*height: 116px;*/
  width: 142px;
  /*line-height: 116px;*/
}

</style>
